<template>
  <view :class="[`${prefixCls}-reward-card-container`]">
    <view class="reward-card-item" v-for="(v, i) of rewardList" :key="i">
      <view class="card-icon"> <uv-image width="96rpx" height="96rpx" :src="v.url" shape="circle" mode="aspectFit" /> </view>
      <view class="card-content">
        <view class="main">
          <view class="money uv-line-1" v-if="v.gift_value">
            <text class="sign">￥</text> <text class="value">{{ v.gift_value }}</text>
          </view>
          <view class="title uv-line-1">{{ v.gift_type }}</view>
        </view>
        <view class="desc uv-line-1" v-if="v.introduce">{{ v.introduce }}</view>
      </view>
      <view class="card-button" @click="openRulePopup(v.rule)">规则</view>
    </view>

    <!-- 规则 -->
    <ActivityRule ref="activityRulePopup" :ruleInfo="ruleDetails" />
  </view>
</template>

<script>
import ActivityRule from './activity-rule.vue'
export default {
  name: 'rewardCard',
  components: { ActivityRule },
  mixins: [],
  props: {
    rewardList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      ruleDetails: {
        title: '使用规则',
        content: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    openRulePopup(rule) {
      this.ruleDetails.content = rule

      // 以下是示例代码，可以根据需要修改为符合您的实际需求
      this.$refs.activityRulePopup.open()
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('reward-card-container')} {
  position: relative;
  .reward-card-item {
    display: flex;
    align-items: center;
    margin: 24rpx auto;
    padding: 24rpx;
    border: 2rpx solid #febf16;
    border-radius: 16rpx;
    .card-icon {
      width: 96rpx;
      height: 96rpx;
      margin-right: 16rpx;
      line-height: 96rpx;
      text-align: center;
      border-radius: 50%;
      background-color: #fff0e6;
      overflow: hidden;
    }
    .card-content {
      width: calc(100% - 232rpx);
      overflow: hidden;
      .main {
        display: flex;
        align-items: baseline;
        margin-bottom: 8rpx;
        .money {
          margin-right: 16rpx;
          color: #ff8400;
          .sign {
            font-size: 28rpx;
          }
          .value {
            font-size: 48rpx;
            font-weight: 600;
          }
        }
        .title {
          color: #7c4d4d;
        }
      }
      .desc {
        color: #999;
        font-size: 20rpx;
      }
    }
    .card-button {
      width: 100rpx;
      height: 48rpx;
      margin-left: 16rpx;
      line-height: 48rpx;
      font-size: 24rpx;
      color: #7c4d4d;
      text-align: center;
      border: 2rpx solid #ffd9ad;
      border-radius: 24rpx;
      background: #fff9f5;
    }
  }
}
</style>
